<template>
  <div style="background:#fff;padding-left:30px">
    <div style="width:100%">
      <span
        style="    font-size: 20px;
    margin: 30px 30px;
    display: inline-block;
      color:#000
"
      >
        <i class="el-icon-document"></i>菜单分配
      </span>
      <el-button @click="goback()" size="mini" round style="margin-left: 1000px;" type="primary">返回</el-button>
    </div>
    <el-tree
      :data="data"
      ref="tree"
      show-checkbox
      node-key="id"
      style
      :props="defaultProps"
      :default-expand-all="true"
      :default-checked-keys="this.checkedarr"
      @check-change="handleCheckChange"
    ></el-tree>
    <span
      slot="footer"
      class="dialog-footer"
      style="    display: flex;
    justify-content: center;"
    >
      <el-button @click="quit()" size="small">取 消</el-button>
      <el-button type="primary" @click="onSubmit()" size="small">确 定</el-button>
    </span>
  </div>
</template>

<script>
import { getshu, setlimit } from "@/api/platformmanage";

import qs from "qs";
export default {
  data() {
    return {
      data: [],

      defaultProps: {
        children: "children",
        label: "name"
      },
      checkedarr: [],
      btnarr: [],
      arrid: [],
      arroneone: [],
      objone: {},
      tableData: [],
      multipleSelection: [],
      radio: "",
      rolefenid: "",
      roleId: "",
      selected: {},
      ruleForm: {
        name: "",
        region: "",
        // rolereq: "",
        sec: "",
        desc: "",
        state: ""
      },
      roleid: "",
      resone: [],
      arrone: [],
      tableData: []
    };
  },
  mounted() {
    this.selectradio();
    console.log(this.$route.params.v, "kkk");
  },
  methods: {
    goback() {
      //   this.$router.push("/headexamine");
      this.$router.go("-1");
    },
    handleCheckChange() {
      let res = this.$refs.tree.getCheckedNodes();
      this.resone = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());
      console.log(this.resone, "iiii");
      this.checkedarr = [];
      this.btnarr = [];
      res.forEach(item => {
        // arr.push(item.id);
        // console.log(item, "ll2tt");
        if (item.resourceLevel == null) {
          this.btnarr.push(item.id);
          console.log(this.btnarr, "ll2ee");
        } else {
          //   this.checkedarr.push(item.id);
          //   this.arrone = arr;
          console.log(this.checkedarr, "ll2");
        }
      });
    },

    add() {
      this.dialogVisible = !this.dialogVisible;
      this.editflag = true;
    },
    edit(v) {
      this.ruleForm.name = v.roleName;
      //   this.ruleForm.rolereq = v.rolereq;
      this.ruleForm.region = String(v.roleType);
      console.log(typeof v.roleType, "oioi");
      this.ruleForm.sec = v.comments;
      this.ruleForm.desc = v.roleDesc;
      this.ruleForm.roleId = v.roleId;
      this.ruleForm.state = String(v.status);
      console.log(v, "pp");
      this.dialogVisible = !this.dialogVisible;
      this.editflag = false;
    },

    selectradio() {
      var zTreeAsyncTest = "zTreeAsyncTest";
      this.roleId = this.$route.params.v.roleId;
      let data = {
        roleId: this.roleId,
        // appId: this.formInline.region,
        otherParam: zTreeAsyncTest
      };
      getshu(data).then(res => {
        // res.records.forEach((item, i) => {
        //   this.options.push({ value: item.orgSeq, label: item.orgName });
        // });
        this.checkedarr = [];
        this.resone = [];
        res.records.forEach((item, i) => {
          if (res.records[i].checked === true) {
            this.resone.push(res.records[i].id);
            // console.log(this.checkedarr, "ppi");
            // this.$refs.tree.setCheckedKeys(this.checkedarr);
          }
          item.children.forEach((item2, i) => {
            if (item.children[i].checked === true) {
              this.checkedarr.push(item.children[i].id);
              this.resone.push(item.children[i].id);
              // console.log(this.checkedarr, this.resone, "ppio");
              this.$refs.tree.setCheckedKeys(this.checkedarr);
            }
          });
        });

        this.loading = false;
        this.total = res.total;
        this.data = res.records;
        // console.log(this.data, "ppe");
      });
    },
    setCheckedNodes(v) {
      console.log(v, "ppp");
    },
    quit() {
      this.$router.push("/roleList");
    },
    onSubmit() {
      console.log(this.arrid, this.btnarr, "pfl");
      //   this.data5 = [];
      //   this.data5.push(this.rolefenid);

      let data = {
        roleId: this.roleId,
        // appId: this.formInline.region,
        key: {
          menuIds: this.resone,
          btnIds: this.btnarr
        }
      };
      setlimit(data).then(res => {
        this.$message({
          showClose: true,
          message: "新增角色菜单关联关系成功",
          type: "success"
        });
        this.$router.push("/roleList");
        this.dialogVisibleorg = !this.dialogVisibleorg;
        this.dialogVisibletwo = false;
      });
    }
  }
};
</script>
<style  lang="less" scoped>
/deep/.el-tree-node.is-expanded > .el-tree-node__children {
  display: flex;
  margin: 10px;
  flex-wrap: wrap;
  font-size: 14px;
}

.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 0px 30px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
</style>